import React, { useRef, useState } from 'react'
import { Button, Swiper, Toast, Popup, Space, } from 'antd-mobile'
import { Sticky } from '@nutui/nutui-react'
import { Tabs } from 'antd-mobile'
import { Divider } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import './App.css'
import img from '../public/1.jpg'
const colors = ['https://img95.699pic.com/photo/40244/2615.jpg_wh860.jpg', 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4sk-CHBgmYfinagp1zu7QAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2', 'https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2', 'https://ts3.cn.mm.bing.net/th?id=OIP-C.g9UbVfyVZX-SfD09JcYr5QHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2']




function Shou() {
  const location = useLocation()
  const _id = useLocation().search.split('=')[1]
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div className='box'>
        <div
          className='content'
          style={{ background: colors }}
          onClick={() => {
            Toast.show(`你点击了卡片 ${index + 1}`)
          }}
        >
          <img src={colors[index]} alt="" />
        </div>
      </div>
    </Swiper.Item>
  ))
  const [visible1, setVisible1] = useState(false)
  const navigate = useNavigate()
  return (
    <div className='box1'>
      <Sticky threshold={0}>
          <div className='header'>
            <img src="https://jdl-oss.s3-cache-accelerate.cn-north-1.jdcloud-oss.com/static/images/home/logo-s.png" alt="" />
          </div>
      </Sticky>
      <Swiper
        loop
        autoplay
        onIndexChange={i => {
        }}
      >
        {items}
      </Swiper>
      <Divider />
      <div className='box2'>
        <div className='box3' onClick={()=> navigate('/cart')}>
          <img src="https://t10.baidu.com/it/u=362793033,183934334&fm=30&app=106&f=PNG?w=640&h=543&s=DD89BC54DA784586196CB563030000B1" alt="" />
          <h2>222</h2>
          <p>22222</p>
        </div>
        <div className='box3'>
          <img src="https://t10.baidu.com/it/u=362793033,183934334&fm=30&app=106&f=PNG?w=640&h=543&s=DD89BC54DA784586196CB563030000B1" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
      </div>
      <div className='box4'>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
        <div className='box5'>
          <img src="http://img1.baidu.com/it/u=2239743568,311251142&fm=253&app=138&f=JPEG?w=565&h=500" alt="" />
          <h2>1111</h2>
          <p>22222</p>
        </div>
      </div>
      <div className='box7'>
        <img src={img} alt="" />
        <div className='box8'>
          <h1>￥0.88</h1>
          <Button
            onClick={() => {
              setVisible1(true)
            }}
          >
            立即购买
          </Button>
        </div>
        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}
          bodyStyle={{ height: '70vh' }}
        >
        </Popup>
      </div>

    </div>
  )
}
export default Shou
